<template>
  <div class="role-set">
    <el-dialog
      title="配置角色"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px"
      @close="$reset('rtemp')"
    >
      <el-form ref="rtemp" label-width="80px">
        <el-form-item label="用户">
          <el-input v-model="username" :disabled="true" :title="username">
          </el-input>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-select
            style="width: 100%"
            v-model="checkList"
            multiple
            placeholder="请选择角色"
          >
            <el-option
              v-for="v in roleData"
              :key="v.id"
              :label="v.name"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-preventReClick @click="handleSubmit"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      checkList: [],
      checkedUser: [],
      username: '',
    }
  },
  props: ['roleData'],
  mounted() {
    this.$bus.$on('showDialogSetRole', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogSetRole')
  },
  methods: {
    init(userList) {
      this.checkedUser = userList
      this.username = userList.map((v) => v.userName).toString()
      this.checkList = []
      this.dialogVisible = true
    },
    async handleSubmit() {
      if (this.checkList.length == 0) {
        this.warnMsg('请选择角色')
        return
      }
      let arr = []
      for (let ros of this.checkedUser) {
        for (let i = 0; i < this.checkList.length; i++) {
          let obj = { userId: ros.id, roleId: this.checkList[i] }
          arr.push(obj)
        }
      }
      await this.$store.dispatch('addBatchTbUser', arr)
      this.dialogVisible = false
      this.checkList = []
      this.$bus.$emit('refreshUserList')
      this.successMsg('操作成功')
    },
  },
}
</script>
<style scoped lang="scss">
</style>